<template>
  <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
        class="doge"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
    </template>
    <RecommendPlayList :currentRecommends="currentRecommends"
      >推荐歌单</RecommendPlayList
    >

    <RecommendNewMusic
      @update:music="$emit('update:music', $event)"
      @update:playlist="$emit('update:playlist', $event)"
      :newSongs="newSongs"
      :currentMusic="$attrs.currentMusic"
      :paused="$attrs.paused"
      >最新音乐</RecommendNewMusic
    >
  </van-pull-refresh>
</template>

<script>
import RecommendPlayList from "@/components/RecommendPlayList.vue";
import RecommendNewMusic from "@/components/RecommendNewMusic.vue";
import { Toast } from "vant";
export default {
  components: {
    RecommendPlayList,
    RecommendNewMusic,
  },
  data: function () {
    return {
      recommends: [],
      newSongs: [],
      RecommendIndex: 0,
      count: 0,
      isLoading: false,
    };
  },
  computed: {
    currentRecommends: function () {
      return this.recommends.slice(
        this.RecommendIndex * 6,
        (this.RecommendIndex + 1) * 6
      );
    },
  },
  created() {
    this.$root.isShowLoading = true;
    this.axios
      .get("/personalized")
      .then((response) => {
        // console.log(response.data);
        this.recommends = response.data.result;
      })
      .finally(() => {
        this.$root.isShowLoading = false;
      });
    this.$root.isShowLoading = true;
    this.axios
      .get("/personalized/newsong")
      .then((response) => {
        // console.log(response.data.result);
        this.newSongs = response.data.result;
      })
      .finally(() => {
        this.$root.isShowLoading = false;
      });
  },
  activated() {
    this.RecommendIndex =
      this.RecommendIndex >= 4 ? 0 : this.RecommendIndex + 1;
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="less">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>